<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="false">
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-row :gutter="48">
          <a-col :span="12">
            <a-form-model-item label="姓名" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="employeeId">
              <select-user-by-dep
                :disabled="formDisabled"
                v-model="model.employeeId"
                placeholder="请选择姓名"
                :normalData="true"
              />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="职务" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="duties">
              <j-dict-select-tag
                :disabled="formDisabled"
                v-model="model.duties"
                dictCode="team_duties"
                placeholder="请选择职务"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="参与审批" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="isApproval">
              <j-dict-select-tag
                :disabled="formDisabled"
                v-model="model.isApproval"
                dictCode="yes_no"
                @input="isApprovalInput"
                placeholder="请选择是否参与审批"/>
                
            </a-form-model-item>
          </a-col>
          <a-col :span="12" v-if="model.isApproval && model.isApproval=='1'">
            <a-form-model-item label="审批权重" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="approvalSort" style="position: relative;">
              <j-dict-select-tag
                :disabled="formDisabled"
                v-model="model.approvalSort"
                dictCode="approval_sequence"
                placeholder="请选择审批权重"/>
                <span style="position: absolute;top: 30px;right: 0px;color: #999;font-size: 12px;">数字越小，审批顺序越靠后</span>
            </a-form-model-item>
          </a-col>
          <!-- 团队负责人：head，分管领导负责人：responsibilities，管理机构负责人：government -->
          <!-- <a-col :span="12">
            <a-form-model-item label="角色类型" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="roleType">
              <j-dict-select-tag
                :disabled="formDisabled"
                v-model="model.roleType"
                dictCode="team_role_type"
                placeholder="请选择角色类型"/>
            </a-form-model-item>
          </a-col> -->
          <a-col :span="24">
            <a-form-model-item label="备注" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="remark">
              <a-textarea :disabled="formDisabled" :max-length="200" v-model="model.remark" rows="4" placeholder="请输入备注"/>
            </a-form-model-item>
          </a-col>
          <!-- <a-col :span="12">
            <a-form-model-item label="团队id" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="mainId">
              <a-input :disabled="formDisabled" v-model="model.mainId" :max-length="36"  placeholder="请输入团队id"></a-input>
            </a-form-model-item>
          </a-col> -->
          
        </a-row>
      </a-form-model>
    </j-form-container>
  </a-spin>
</template>

<script>

  import { httpAction, getAction } from '@/api/manage'
  import { validateDuplicateValue } from '@/utils/util'
  import SelectUserByDep from '@/views/scy/components/SelectUserByDep'
  import SelectTeamInput from '@/views/scy/components/SelectTeamInput'
  import SelectCompanyInput from '@/views/scy/components/SelectCompanyInput'
  import SelectCustomerInput from '@/views/scy/components/SelectCustomerInput'
  import moment from 'moment'
  import { mapGetters } from 'vuex'
  
  var dataSource = []
  var obj = ''
  let getApprovalSort = (rule, value, callback) =>  {
    if (!value || dataSource.length == 0) {
      callback()
    }
    // 判断数组对象中存在了编辑中的权重则删除改对象
    if (obj && obj.approvalSort) {
      dataSource = dataSource.filter(item => item.approvalSort != obj.approvalSort)
    }
    
    // 判断数组对象中审批权重是否已经存在
    let flag = dataSource.some(item => item.approvalSort == value)
    if (flag) {
      callback(new Error('该审批权重已存在!'));
      // this.$message.warning('该审批权重的值已经存在，请重新选择')
    } else {
      callback()
    }
  }
  // 判断是否已经选择了某个审批姓名的值，如果选择了则提示该姓名的值已经存在，请重新选择
  let getEmployeeId = (rule, value, callback) =>  {
    if (!value || dataSource.length == 0) {
      callback()
    }
    // 判断数组对象中存在了编辑中的姓名则删除改对象
    if (obj && obj.employeeId) {
      dataSource = dataSource.filter(item => item.employeeId != obj.employeeId)
    }
    
    // 判断数组对象中姓名是否已经存在
    let flag = dataSource.some(item => item.employeeId == value)
    if (flag) {
      callback(new Error('该人员姓名已存在!'));
    } else {
      callback()
    }
  }
  export default {
    name: 'ErpOmcTeamManagerDetailForm',
    components: {
      SelectUserByDep,
      SelectTeamInput,
      SelectCompanyInput,
      SelectCustomerInput
    },
    props: {
      //表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      }
    },
    data () {
      return {
        dataSource: [],
        model:{
          approvalSort: null,
          duties: null,
          employeeId: null,
          isApproval: null,
          remark: null,
          roleType: null,
        },
        flag: false,
        labelCol: {
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 24 },
        },
        confirmLoading: false,
        validatorRules: {
          employeeId: [
              { required: true, message: '请选择姓名!' },
              { validator: getEmployeeId }
          ],
          duties: [
              { required: true, message: '请选择职务!' }
          ],
          isApproval: [
              { required: true, message: '请选择是否参与审批!' }
          ],
          approvalSort: [
              { required: true, message: '请选择审批权重' },
              { validator: getApprovalSort }
          ]
        },
        url: {
          add: "/api/erp/omc/teammanager/erpOmcTeamManagerDetail/add",
          edit: "/api/erp/omc/teammanager/erpOmcTeamManagerDetail/edit",
          queryById: "/api/erp/omc/teammanager/erpOmcTeamManagerDetail/queryById"
        }
      }
    },
    computed: {
      formDisabled(){
        return this.disabled
      },
    },
    created () {
       //备份model原始值
      this.modelDefault = JSON.parse(JSON.stringify(this.model));
    },
    methods: {
      ...mapGetters(['userInfo']),
      add (record) {
        this.modelDefault.roleType = record.roleType // 角色类型
        this.modelDefault.isApproval = '1' // 是否参与审批
        this.edit(this.modelDefault);
      },
      edit (record) {
        this.$refs.form.clearValidate();
        this.model = Object.assign({}, record);
        this.visible = true;
        obj = record
        dataSource = this.dataSource
        
      },
      isApprovalInput () {
        this.$set(this.model, 'approvalSort', null)
      },
      submitForm () {
        const that = this;
        // 触发表单验证
        this.$refs.form.validate(valid => {
          if (valid) {
            that.$emit('ok', this.model, this.flag);
          }
        })
      },
    }
  }
</script>
